<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单计算器</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:300px;
				min-height:300px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			h2{
				height:50px;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
			}
			p{
				margin:20px 0;
			}
			input{
				width:220px;
				margin-left:25px;
				text-align:center;
			}
			button{
				width:60px;
				height:30px;
				margin:0 5px;
				text-align:center;
				line-height:30px;
				border:none;
				background-color:black;
				color:white;
				cursor:pointer;
				font-size:22px;
			}
			button:hover{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>简单计算器</h2>
			<p>
				<span>数值A:</span><input type="text" v-model="num1" placeholder="请输入num1:" @focus="handleBlur">
			</p>
			<p>
				<span>数值B:</span><input type="text" v-model="num2" placeholder="请输入num2:" @focus="handleBlur">
			</p>
			<p>
				<button @click="computed('+')">+</button>
				<button @click="computed('-')">-</button>
				<button @click="computed('*')">*</button>
				<button @click="computed('/')">/</button>
			</p>
			<hr>
			<p>计算结果:&nbsp;&nbsp;&nbsp;<span v-text="result"></span></p>
		</div>
		
		<script>
			let vm = new Vue({
				el:"#app",
				data:{
				    num1:"",
					num2:"",
					result:""
				},
				methods:{
					computed:function(str){
						switch(str){
							case "+":
							this.result=Number(this.num1)+Number(this.num2);
							this.num1=this.num2="";
							break;
							case "-":
							this.result=Number(this.num1)-Number(this.num2);
							this.num1=this.num2="";
							break;
							case "*":
							this.result=Number(this.num1)*Number(this.num2);
							this.num1=this.num2="";
							break;
							case "/":
							this.result=Number(this.num1)/Number(this.num2);
							this.num1=this.num2="";
							break;
							default:
							this.result="请输入两个数字进行计算！";
							break;
						}
					},
					handleBlur:function(){
						this.result = "";
					}
				}
			})
		</script>
	</body>
</html>
